<template>
	<el-card class="user-container">
		<template #header>
			<div class="header">
				<span>{{ $t('msg.profile.introduce') }}</span>
			</div>
		</template>

		<div class="user-profile">
			<!-- 头像 -->
			<div class="box-center">
				<pan-thumb
					:image="$store.getters.userInfo.avatar"
					:height="'100px'"
					:width="'100px'"
					:hoverable="false"
				>
					<div>Hello</div>
					{{ $store.getters.userInfo.title }}
				</pan-thumb>
			</div>
			<!-- 姓名 && 角色 -->
			<div class="box-center">
				<div class="user-name text-center">
					{{ $store.getters.userInfo.username }}
				</div>
				<div class="user-role text-center text-muted">
					{{ $store.getters.userInfo.title }}
				</div>
			</div>
		</div>

		<!-- 简介 -->
		<div class="project-bio">
			<div class="project-bio-section">
				<div class="project-bio-section-header">
					<svg-icon icon="introduce" />
					<span>{{ $t('msg.profile.projectIntroduction') }}</span>
				</div>
				<div class="project-bio-section-body">
					<div class="text-muted">
						{{ $t('msg.profile.muted') }}
					</div>
				</div>
			</div>

			<div class="project-bio-section">
				<div class="project-bio-section-header">
					<svg-icon icon="reward" /><span>{{
						$t('msg.profile.projectFunction')
					}}</span>
				</div>
				<div class="project-bio-section-body">
					<div
						class="progress-item"
						v-for="item in features"
						:key="item.id"
					>
						<div>{{ item.title }}</div>
						<el-progress
							:percentage="item.percentage"
							status="success"
						/>
					</div>
				</div>
			</div>
		</div>
	</el-card>
</template>

<script setup>
import PanThumb from '@/components/PanThumb/index.vue'
import { defineProps } from 'vue'
defineProps({
	features: {
		type: Array,
		required: true
	}
})
</script>

<style lang="scss" scoped>
.user-container {
	.text-muted {
		font-size: 14px;
		color: #777;
	}

	.user-profile {
		text-align: center;
		.user-name {
			font-weight: bold;
		}

		.box-center {
			padding-top: 10px;
		}

		.user-role {
			padding-top: 10px;
			font-weight: 400;
		}
	}

	.project-bio {
		margin-top: 20px;
		color: #606266;
		span {
			padding-left: 4px;
		}

		.project-bio-section {
			margin-bottom: 36px;
			.project-bio-section-header {
				border-bottom: 1px solid #dfe6ec;
				padding-bottom: 10px;
				margin-bottom: 10px;
				font-weight: bold;
			}
			.project-bio-section-body {
				.progress-item {
					margin-top: 10px;
					div {
						font-size: 14px;
						margin-bottom: 2px;
					}
				}
			}
		}
	}
}
</style>
